<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <!-- 
            v-foc:click.num="10"
            v-foc(指令名):click(指令属性).num(修饰符)='10'(指令的值)
         -->
        <input type="text" v-foc:title.num="'green'">
    </div>
</body>
<script>
    const app = Vue.createApp({
        data () {
            return {}
        },
        // 自定义指令选项
        directives: {
            // 自定义指令的时候不需要加 v-,在标签中使用的时候直接 v-foc 即可
            foc: {
                // 在绑定元素的 attribute 前
                // 或事件监听器应用前调用
                created (el, binding, vnode, prevVnode) {
                    // 下面会介绍各个参数的细节
                },
                // 在元素被插入到 DOM 前调用
                beforeMount (el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都挂载完成后调用
                mounted (el, binding, vnode, prevVnode) {
                    console.log(vnode, prevVnode);
                    setTimeout(() => {
                        el.focus()
                    }, 2000)
                    // binding.value 获取指令后面的值
                    // binding.arg 获取指令的属性
                    // binding.modifiers 获取到修饰符
                    // console.log(binding);
                    el.style.color = binding.value

                    if (binding.modifiers.num) {
                        // 有该修饰符
                        // 阻止默认事件
                    }
                    if (binding.arg == 'title') {
                        el.title = binding.value
                    }

                },
                // 绑定元素的父组件更新前调用
                beforeUpdate (el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都更新后调用
                updated (el, binding, vnode, prevVnode) { },
                // 绑定元素的父组件卸载前调用
                beforeUnmount (el, binding, vnode, prevVnode) { },
                // 绑定元素的父组件卸载后调用
                unmounted (el, binding, vnode, prevVnode) { }
            }
        }
    })
    app.mount('#app')
</script>

</html>